<template>
  <div class="question-detail">
    <div class="content w-960">
      <div class="question-title">{{ detail?.title }}</div>
      <div class="markdown-body v-note-wrapper" v-if="desc">
        <div class="v-note-show">
          <div class="question-desc v-show-content" v-html="desc" v-copy></div>
        </div>
      </div>
      <div class="question-tag">
        <a-tag color="#3eaf7c">{{ detail.category === 'Choice' ? '选择题' : '简答题' }}</a-tag>
        <div class="question-level">
          <span class="label">难度：</span>
          <div class="level-detail">
            <i v-for="item in Math.floor(detail.level)" :key="item" class="ri-star-fill"></i>
            <i v-if="detail.level % 1 !== 0" class="ri-star-half-fill"></i>
          </div>
        </div>
      </div>
      <div class="question-options" v-if="options">
        <div class="choice-type">本题为{{ options.isMulti ? '多选题' : '单选题' }}</div>
        <a-radio-group>
          <a-radio
            v-for="(item, index) in options.options"
            :key="item"
            :value="item"
            :style="{ height: '30px', lineHeight: '30px', display: 'flex', alignItems: 'center' }">
            <span class="radio-text"><i>{{ letterMap[index] }}.</i> <span>{{ item }}</span></span>
          </a-radio>
        </a-radio-group>
      </div>
      <div class="show-answer-btn" v-if="!showAnswer">
        <a-button type="primary" @click="showAnswer = true">查看答案</a-button>
      </div>
      <div class="question-answer markdown-body v-note-wrapper" v-else>
        <div class="question-answer-title">参考答案</div>
        <div class="choice-answer-list" v-if="options?.answer">
          <div
            class="choice-answer-list-item"
            v-for="item in options.answer"
            :key="item">
            <i>{{ letterMap[item] }}.</i> <span>{{ options.options[item] }}</span>
          </div>
        </div>
        <div class="v-note-show">
          <div class="question-desc v-show-content" v-html="explanation" v-copy></div>
        </div>
      </div>
      <div class="prev-next-question-btn">
        <div class="prev" v-if="prev" @click="updateQuestion(prev._id)">
          <i class="ri-arrow-left-line"></i>上一题
        </div>
        <div class="next" v-if="next" @click="updateQuestion(next._id)">
          下一题<i class="ri-arrow-right-line"></i>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { md } from '~/util'
export default {
  layout: 'BaseLayout',
  name: 'QuestionDetail',
  async asyncData ({ $axios, params, query }) {
    const [id, tagId] = [params.id, query.tagId]
    const { data } = await $axios.get(`/gimishare/api/v1/question/detail?id=${id}&tagId=${tagId}`)
    const { next, prev, desc, explanation, options, ...detail } = data
    return {
      desc: desc ? md.render(desc) : '',
      explanation: explanation ? md.render(explanation) : explanation,
      options: options ? JSON.parse(options) : null,
      detail,
      next,
      prev,
      tagId
    }
  },

  data () {
    return {
      letterMap: {
        0: 'A',
        1: 'B',
        2: 'C',
        3: 'D',
        4: 'E',
        5: 'F'
      },
      showAnswer: false
    }
  },

  methods: {
    updateQuestion (id) {
      this.$router.push(`/question/${id}?tagId=${this.tagId}`)
    }
  },

  head () {
    return {
      link: [
        {
          rel: 'stylesheet',
          href: '/md/markdown/juejin-markdown.min.css'
        },
        {
          rel: 'stylesheet',
          href: '/md/highlightjs/styles/atom-one-dark.min.css'
        },
        {
          rel: 'stylesheet',
          href: '/md/katex/katex.min.css'
        }
      ]
    }
  }
}
</script>
<style lang="less" scoped>
.question-detail {
  background-color: #fff;
  min-height: ~"calc(100vh - 58px - 61px)";
  margin-top: -1px;
  .content {
    padding-top: 24px;
    .question-title {
      font-size: 28px;
      font-weight: 600;
      color: #000;
      margin-bottom: 24px;
    }
    .question-tag {
      display: flex;
      align-items: center;
      margin-bottom: 24px;
      .question-level {
        display: flex;
        align-items: center;
        margin-left: 12px;
        .label {
          color: #999;
        }
        .level-detail {
          display: flex;
          font-size: 0;
          i {
            font-size: 15px;
            color: #f97316;
            margin-right: 2px;
          }
        }
      }
    }
    .question-options {
      margin-bottom: 24px;
      .choice-type {
        font-size: 16px;
        color: #333;
      }
      .radio-text {
        i {
          font-style: normal;
          font-weight: 600;
          margin-right: 4px;
        }
        span {
          font-size: 16px;
        }
      }
    }
    .show-answer-btn {
      text-align: center;
    }
    .question-answer {
      &-title {
        color: #000;
        font-size: 20px;
        font-weight: 600;
        margin-bottom: 12px;
      }
      .choice-answer-list {
        margin-bottom: 12px;
        &-item {
          i {
            font-style: normal;
            font-weight: 600;
            margin-right: 4px;
          }
          span {
            font-size: 16px;
          }
        }
      }
    }
    .prev-next-question-btn {
      margin-top: 24px;
      padding-bottom: 24px;
      display: flex;
      & > div {
        cursor: pointer;
        i {
          font-size: 18px;
        }
        &:hover {
          color: var(--primary-color);
        }
      }
      .next {
        margin-left: auto;
        i {
          margin-left: 3px;
        }
      }
      .prev {
        i {
          margin-right: 3px;
        }
      }
    }
  }
}
</style>
